<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/carts.css" />
  </head>

  <body>
    <div id="app">
      <section class="cartMain">
        <div class="cartMain_hd">
          <ul class="order_lists cartTop">
            <li class="list_chk">
              <!--所有商品全选：一级-->
              <input type="checkbox" class="whole_check" />全选
            </li>
            <li class="list_con">商品信息</li>
            <li class="list_info">商品参数</li>
            <li class="list_price">单价</li>
            <li class="list_amount">数量</li>
            <li class="list_sum">金额</li>
            <li class="list_op">操作</li>
          </ul>
        </div>

        <div class="cartBox">
          <div class="shop_info">
            <div class="all_check">
              <!--店铺全选按钮:二级-->
              <input type="checkbox" class="shopChoice" />
            </div>
            <div class="shop_name">
              <!-- 店铺名 -->
              店铺：<a href="javascript:;">店铺名</a>
            </div>
          </div>
          <div class="order_content">
            <ul class="order_lists">
              <li class="list_chk">
                <!-- 商品的复选框：三级 -->
                <input type="checkbox" class="son_check" />
              </li>
              <li class="list_con">
                <!-- 商品图片 -->
                <div class="list_img">
                  <a href="javascript:;"><img src="./images/1.png" alt="" /></a>
                </div>
                <!-- 商品标题 -->
                <div class="list_text">
                  <a href="javascript:;">这是可以让你变帅的洗面奶</a>
                </div>
              </li>
              <li class="list_info">
                <!-- 商品规格 -->
                <p>规格：默认</p>
                <p>尺寸：400g</p>
              </li>
              <li class="list_price">
                <!-- 价格 -->
                <p class="price">￥ 89</p>
              </li>
              <li class="list_amount">
                <div class="amount_box">
                  <!-- 点击减去数量 -->
                  <!-- 如果不可点，可以添加 reSty样式名 -->
                  <a href="javascript:;" class="reduce reSty">-</a>
                  <!-- 数量 -->
                  <input type="text" value="1" class="sum" />
                  <!-- 点击加数量 -->
                  <!-- 如果不可点，可以添加 reSty样式名 -->
                  <a href="javascript:;" class="plus">+</a>
                </div>
              </li>
              <li class="list_sum">
                <!-- 总价 -->
                <p class="sum_price">￥ 89900</p>
              </li>
              <li class="list_op">
                <!-- 删除商品 -->
                <p class="del">
                  <a href="javascript:;" class="delBtn">移除商品</a>
                </p>
              </li>
            </ul>
          </div>
        </div>

        <!--底部-->
        <div class="bar-wrapper">
          <div class="bar-right">
            <div class="piece">
              已选商品<strong class="piece_num">99</strong>件
            </div>
            <div class="totalMoney">
              共计: <strong class="total_text">8776</strong>
            </div>
            <div class="calBtn">
              <a href="javascript:;" class="btn_sty">结算</a>
            </div>
          </div>
        </div>
      </section>
      <!-- 模态框的显示和隐藏，隐藏就添加样式hide；显示就去掉hide -->
      <section class="model_bg hide"></section>
      <section class="my_model hide">
        <p class="title">删除宝贝<span class="closeModel">X</span></p>
        <p>您确认要删除该宝贝吗？</p>
        <div class="opBtn">
          <a href="javascript:;" class="dialog-sure">确定</a
          ><a href="javascript:;" class="dialog-close">关闭</a>
        </div>
      </section>
    </div>
  </body>
</html>
